<template>
  <div v-if="detialvisible">
    <el-dialog :visible="detialvisible" :title="formatTitle(detailMode)" class="detailWarp" width="60%" @close="closeDialog">
      <!-- {{ detailMode }}
      {{ myindex }} -->
      <!-- {{ ditaillist.refundOrderStatus }} -->
      <div class="storeOrder_title">
        <span v-if="isRefund!==0">退单状态：</span>
        <span v-else>订单状态：</span>

        {{ ditaillist.refundOrderStatus | formatRefundStatus }}
      </div>
      <!-- 同意退款 -->
      <div v-if="detailMode == 'confirmRefund'">
        <h3 class="ml20">基本信息</h3>
        <table class="table">
          <tr>
            <td>订单编号:</td>
            <td>{{ ditaillist.orderSn }}</td>
            <td>下单时间:</td>
            <td>{{ ditaillist.goodsOrder.createTime }}</td>
          </tr>
          <tr>
            <td>商品名称:</td>
            <td>{{ ditaillist.goodsName }}</td>
            <td>类型:</td>
            <td>{{ ditaillist.goodsOrder.categoryName }}</td>
          </tr>
          <tr>
            <td>单价:</td>
            <td>{{ ditaillist.goodsOrder.goodsSalePrice }}元</td>
            <td>快递费:</td>
            <td>{{ ditaillist.goodsOrder.postageAmount }}</td>
          </tr>
          <tr>
            <td>总价:</td>
            <td>{{ ditaillist.goodsOrder.totalAmount }}元</td>
          </tr>
        </table>
        <hr>
        <h3 class="ml20">退款信息</h3>
        <!-- <div class="storeOrder_title">
          退款状态：{{ ditaillist.refundOrderStatus | formatRefundStatus }}
        </div> -->
        <table class="table">
          <tr>
            <td>退款单号:</td>
            <td>{{ ditaillist.refundOrderSn }}</td>
            <td>申请退款时间:</td>
            <td>{{ ditaillist.createTime }}</td>
          </tr>
          <tr>
            <td>订单金额:</td>
            <td>{{ ditaillist.orderAmount }}元</td>
            <td>联系人:</td>
            <td>{{ ditaillist.contactPerson }}</td>
          </tr>
          <tr>
            <td>联系人手机号:</td>
            <td>{{ ditaillist.contactPhone }}</td>
            <td>图片凭证:</td>
            <td>
              <el-button type="primary" size="mini" @click="checkVoucher()">查看</el-button>
            </td>
          </tr>
        </table>
        <hr>
        <!-- {{ refundData }} -->
        <!-- detailAddress: this.refundData.receiverAddress, -->
        <h3 class="ml20">退款操作</h3>
        <el-form :model="refundData" class="storeOrder">
          <!-- <h3 class="ml20">基本信息</h3> -->
          <el-form-item :label-width="labeWidth" label="应退金额">
            <span>{{ ditaillist.refundAmount }}元</span>
          </el-form-item>
          <el-form-item :label-width="labeWidth" label="退款金额" prop="refundAmount">
            <el-input v-model="refundData.refundAmount" type="text" class="input" />&nbsp;元
          </el-form-item>
          <el-form-item v-if="ditaillist.refundType === 2" :label-width="labeWidth" label="收货地点" prop="addressList">
            <!-- <el-input v-model="refundData.refundAmount" type="text" class="input" /> -->
            <el-select v-model="refundData.detailAddress" style="width:38%" @change="changeSelect" >
              <el-option v-for="item in addressList" :key="item.id" :label="detailAddress(item)" :value="item" />
              <!-- <el-option v-for="item in addressList" :key="item.id" :label="detailAddress(item)" :value="detailAddress(item)" /> -->
            </el-select>
          </el-form-item>
          <el-form-item v-if="ditaillist.refundType === 2" :label-width="labeWidth" label="联系人" prop="">
            <el-input :disabled="true" v-model="addressData.name" type="text" class="input" style="margin-top:5px"/>
          </el-form-item>
          <el-form-item v-if="ditaillist.refundType === 2" :label-width="labeWidth" label="手机号" prop="">
            <el-input :disabled="true" v-model="addressData.phone" type="text" class="input" style="margin-top:5px"/>
          </el-form-item>
          <el-form-item :label-width="labeWidth" label="退款审核备注" prop="refundRemark">
            <el-input v-model="refundData.refundRemark" type="text" class="input" style="margin-top:5px"/>
          </el-form-item>
        </el-form>
        <hr>
        <p class="askTip"><i class="el-icon-warning warning"/>是否确认操作该订单?</p>
        <div style="width:100%; text-align:center">
          <el-button
            v-preventReClick
            v-if="setPermissionBtn('/goods/refund/order/agree', ditaillist)"
            vaule="同意退款"
            type="primary"
            @click="agreenRefund()">{{ ditaillist.btnName }}</el-button>
          <el-button
            v-preventReClick
            v-if="setPermissionBtn('/goods/refund/order/refuse', ditaillist)"
            vaule="拒绝退款"
            type="danger"
            @click="refuseRefund()">{{ ditaillist.btnName }}</el-button>
          <el-button v-preventReClick :disabled="false" @click="closeDialog">取消</el-button>
        </div>
      </div>

      <!-- 确认收货 -->
      <div v-if="detailMode == 'confirmReceipt'">
        <h3 class="ml20">基本信息</h3>
        <table class="table">
          <tr>
            <td>订单编号:</td>
            <td>{{ ditaillist.orderSn }}</td>
            <td>下单时间:</td>
            <td>{{ ditaillist.goodsOrder.createTime }}</td>
          </tr>
          <tr>
            <td>商品名称:</td>
            <td>{{ ditaillist.goodsName }}</td>
            <td>类型:</td>
            <td>{{ ditaillist.goodsOrder.categoryName }}</td>
          </tr>
          <tr>
            <td>单价:</td>
            <td>{{ ditaillist.goodsOrder.goodsSalePrice }}元</td>
            <td>快递费:</td>
            <td>{{ ditaillist.goodsOrder.postageAmount }}</td>
          </tr>
          <tr>
            <td>总价:</td>
            <td>{{ ditaillist.goodsOrder.totalAmount }}元</td>
          </tr>
        </table>
        <div v-if="ditaillist.expressNumber !== null || ditaillist.expressCompany !== null">
          <hr>
          <h3>退货快递信息</h3>
          <table class="table">
            <tr>
              <td v-if="ditaillist.expressNumber">快递单号:</td>
              <td v-if="ditaillist.expressNumber">{{ ditaillist.expressNumber }}</td>
              <td v-if="ditaillist.expressCompany">快递公司:</td>
              <td v-if="ditaillist.expressCompany">{{ ditaillist.expressCompany }}</td>
              <td v-if="!ditaillist.expressNumber || !ditaillist.expressCompany"/>
              <td v-if="!ditaillist.expressNumber || !ditaillist.expressCompany"/>
            </tr>
          </table>
        </div>
        <hr>
        <h3 class="ml20">退款信息</h3>
        <table class="table">
          <tr>
            <td>退货单号:</td>
            <td>{{ ditaillist.refundOrderSn }}</td>
            <td>申请时间:</td>
            <td>{{ ditaillist.createTime }}</td>
          </tr>
          <tr>
            <td>退单类型:</td>
            <td>{{ ditaillist.refundType | refundOrderType }}</td>
            <td>联系人:</td>
            <td>{{ ditaillist.contactPerson }}</td>
          </tr>
          <tr>
            <td>联系人电话:</td>
            <td>{{ ditaillist.contactPhone }}</td>
            <td/>
            <td/>
          </tr>
        </table>
        <hr>
        <h3 class="ml20">退款操作</h3>
        <table class="table">
          <tr>
            <td>商品实付:</td>
            <td>{{ ditaillist.goodsOrder.payAmount }}</td>
            <td>退款金额:</td>
            <td><el-input v-model="refundData.refundAmount" type="text" style="width:80%" class="input" />&nbsp;元</td>
          </tr>
          <tr>
            <td>收货地点:</td>
            <td colspan="3">{{ ditaillist.receiverAddress }}</td>
          </tr>
          <tr>
            <td>操作人员:</td>
            <td>{{ ditaillist.goodsRefundOrderRemarks[0].createUser }}</td>
            <td>操作时间:</td>
            <td>{{ ditaillist.goodsRefundOrderRemarks[0].createTime }}</td>
          </tr>
          <tr>
            <td>退款审核备注:</td>
            <td colspan="3">{{ ditaillist.goodsRefundOrderRemarks[0].remark }}</td>
          </tr>
          <tr>
            <td>收货备注:</td>
            <td colspan="3"><el-input v-model="refundData.refundRemark" type="text" style="width:80%" class="input" /></td>
          </tr>
        </table>
        <hr>
        <p class="askTip"><i class="el-icon-warning warning"/>是否确认操作该订单?</p>
        <div style="width:100%; text-align:center">
          <el-button
            v-preventReClick
            type="primary"
            @click="confirmReceipt()">确认收货</el-button>
          <el-button v-preventReClick :disabled="false" @click="closeDialog">取消</el-button>
        </div>
      </div>

      <!-- 完成退款 -->
      <!-- <div v-if="detailMode == 'finishRefund'">
        <h3 class="ml20">基本信息</h3>
        <table class="table">
          <tr>
            <td>订单编号:</td>
            <td>{{ ditaillist.orderSn }}</td>
            <td>下单时间:</td>
            <td>{{ ditaillist.createTime }}</td>
          </tr>
          <tr>
            <td>商品名称:</td>
            <td>{{ ditaillist.roomName }}</td>
            <td>类型:</td>
            <td>{{ ditaillist.categoryName }}</td>
          </tr>
          <tr>
            <td>入住日期:</td>
            <td>{{ ditaillist.checkInTime }}</td>
            <td>离店日期:</td>
            <td>{{ ditaillist.checkOutTime }}</td>
          </tr>
          <tr>
            <td>单价:</td>
            <td>{{ ditaillist.roomSalePrice }}元</td>
            <td>间夜数量:</td>
            <td>{{ ditaillist.totalNum }}</td>
          </tr>
          <tr>
            <td>总价:</td>
            <td>{{ ditaillist.totalAmount }}元</td>
          </tr>
        </table>
        <hr>
        <h3 class="ml20">退款信息</h3>
        <div class="storeOrder_title">
          订单状态：{{ ditaillist.roomRefundOrder.refundOrderStatus | formatRefundStatus }}
        </div>
        <table class="table">
          <tr>
            <td>退款单号:</td>
            <td>{{ ditaillist.roomRefundOrder.refundOrderSn }}</td>
            <td>申请退款时间:</td>
            <td>{{ ditaillist.roomRefundOrder.createTime }}</td>
          </tr>
          <tr>
            <td>订单金额:</td>
            <td>{{ ditaillist.roomRefundOrder.refundAmount }}元</td>
            <td>联系人:</td>
            <td>{{ ditaillist.customerName }}</td>
          </tr>
          <tr>
            <td>联系人手机号:</td>
            <td>{{ ditaillist.customerPhone }}</td>
            <td>退款金额:</td>
            <td>{{ ditaillist.roomRefundOrder.refundAmount }}元</td>
          </tr>
        </table>
        <hr>
        <p class="askTip"><i class="el-icon-warning warning"/>是否确认操作该订单?</p>
        <div style="width:100%; text-align:center">
          <el-button v-preventReClick :disabled="false" @click="closeDialog">取消</el-button>
          <el-button v-preventReClick type="primary" @click="agreenRefund()">确认</el-button>
        </div>
      </div> -->

      <!-- 退单详情 -->
      <div v-if="detailMode == 'refundDetail'">
        <h3 class="ml20">基本信息</h3>
        <table class="table">
          <tr>
            <td>订单编号:</td>
            <td>{{ ditaillist.orderSn }}</td>
            <td>下单时间:</td>
            <td>{{ ditaillist.goodsOrder.createTime }}</td>
          </tr>
          <tr>
            <td>商品名称:</td>
            <td>{{ ditaillist.goodsName }}</td>
            <td>类型:</td>
            <td>{{ ditaillist.goodsOrder.categoryName }}</td>
          </tr>
          <tr>
            <td>购买数量:</td>
            <td>{{ ditaillist.goodsOrder.goodsQuantity }}</td>
            <td>单价:</td>
            <td>{{ ditaillist.goodsOrder.goodsSalePrice }}元</td>
          </tr>
          <tr>
            <td>快递费:</td>
            <td>{{ ditaillist.goodsOrder.postageAmount }}元</td>
            <td>美妈折扣:</td>
            <td>{{ ditaillist.goodsOrder.vipDiscount }}</td>
          </tr>
          <tr>
            <td>总价:</td>
            <td>{{ ditaillist.goodsOrder.totalAmount }}元</td>
          </tr>
        </table>
        <hr>
        <h3 class="ml20">收件人信息</h3>
        <table class="table">
          <tr>
            <td>收件人姓名:</td>
            <td>{{ ditaillist.goodsOrder.receiverName }}</td>
            <td>收件人手机:</td>
            <td>{{ ditaillist.goodsOrder.receiverPhone }}</td>
          </tr>
          <tr>
            <td>收件人详细地址:</td>
            <td colspan="3">
              {{ ditaillist.goodsOrder.receiverProvince }}
              {{ ditaillist.goodsOrder.receiverProvince === '北京市' || ditaillist.goodsOrder.receiverProvince === '天津市' ? '' : ditaillist.goodsOrder.receiverCity }}
              {{ ditaillist.goodsOrder.receiverCounty }}
              {{ ditaillist.goodsOrder.receiverDetailAddress }}
            </td>
          </tr>
        </table>
        <div>
          <hr>
          <h3 class="ml20">快递信息</h3>
          <table class="table">
            <!-- {{ ditaillist.goodsOrder }} -->
            <tr>
              <td>快递公司:</td>
              <td>{{ ditaillist.goodsOrder.deliveryCompany }}</td>

              <td>快递单号:</td>
              <td>{{ ditaillist.goodsOrder.deliverySn }}</td>
            </tr>
          </table>
          <div class="bottomButtonDiv">
            <el-button type="primary" size="small" @click="toLogistics(ditaillist.goodsOrder.orderSn, ditaillist.goodsOrder.deliveryCompany, 1)">查看物流</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary" size="small" @click="checkRemark(ditaillist.goodsOrder.id, 1, ditaillist)">查看备注</el-button>
          </div>
        </div>
        <!-- <p class="askTip"><i class="el-icon-warning warning"/>是否确认操作该订单?</p>
        <div style="width:100%; text-align:center">
          <el-button v-preventReClick :disabled="false">取消</el-button>
          <el-button v-preventReClick type="primary" @click="agreenRefund()">确认</el-button>
        </div> -->
      </div>
      <!-- 退单详情 -->
      <div v-if="detailMode == 'refundOrderDetail'">
        <h3 class="ml20">基本信息</h3>
        <table class="table">
          <tr>
            <td>订单编号:</td>
            <td>{{ ditaillist.orderSn }}</td>
            <td>下单时间:</td>
            <td>{{ ditaillist.goodsOrder.createTime }}</td>
          </tr>
          <tr>
            <td>商品名称:</td>
            <td>{{ ditaillist.goodsOrder.goodsName }}</td>
            <td>类型:</td>
            <td>{{ ditaillist.goodsOrder.categoryName }}</td>
          </tr>
          <tr>
            <td>购买数量:</td>
            <td>{{ ditaillist.goodsOrder.goodsQuantity }}</td>
            <td>单价:</td>
            <td>{{ ditaillist.goodsOrder.goodsSalePrice }}元</td>
          </tr>
          <tr>
            <td>快递费:</td>
            <td>{{ ditaillist.goodsOrder.postageAmount }}元</td>
            <td>总价:</td>
            <td>{{ ditaillist.goodsOrder.totalAmount }}元</td>
          </tr>
        </table>
        <hr>
        <h3 class="ml20">收件人信息</h3>
        <table class="table">
          <tr>
            <td>收件人姓名:</td>
            <td>{{ ditaillist.goodsOrder.receiverName }}</td>
            <td>收件人手机:</td>
            <td>{{ ditaillist.goodsOrder.receiverPhone }}</td>
          </tr>
          <tr>
            <td>收件人详细地址:</td>
            <td colspan="3">
              {{ ditaillist.goodsOrder.receiverProvince }}
              {{ ditaillist.goodsOrder.receiverProvince === '北京市' || ditaillist.goodsOrder.receiverProvince === '天津市' ? '' : ditaillist.goodsOrder.receiverCity }}
              {{ ditaillist.goodsOrder.receiverCounty }}
              {{ ditaillist.goodsOrder.receiverDetailAddress }}
            </td>
          </tr>
        </table>
        <div>
          <hr>
          <h3 class="ml20">退款操作</h3>
          <table class="table">
            <tr>
              <td>商品实付:</td>
              <td>{{ ditaillist.goodsOrder.payAmount }}元</td>
              <td>退款金额:</td>
              <td>{{ ditaillist.refundAmount }}</td>
            </tr>
            <tr>
              <td>收货地址:</td>
              <td colspan="3">{{ ditaillist.receiverAddress }}</td>
            </tr>
            <tr v-if="ditaillist.goodsRefundOrderRemarks.length">
              <td>操作人员:</td>
              <td>{{ ditaillist.goodsRefundOrderRemarks[0].createUser }}</td>
              <td>操作时间:</td>
              <td>{{ ditaillist.goodsRefundOrderRemarks[0].createTime }}</td>
            </tr>
            <tr v-if="ditaillist.goodsRefundOrderRemarks.length">
              <td>退款审核备注:</td>
              <td colspan="3">{{ ditaillist.goodsRefundOrderRemarks[0].remark }}</td>
            </tr>
          </table>
        </div>

      </div><!-- 退款异常的情况下， 点击完成退款操作 -->
      <div v-if="detailMode === 'abnormalRefund'">
        <h3 class="ml20">基本信息</h3>
        <table class="table">
          <tr>
            <td>订单编号:</td>
            <td>{{ ditaillist.orderSn }}</td>
            <td>下单时间:</td>
            <td>{{ ditaillist.goodsOrder.createTime }}</td>
          </tr>
          <tr>
            <td>商品名称:</td>
            <td>{{ ditaillist.goodsName }}</td>
            <td>类型:</td>
            <td>{{ ditaillist.goodsOrder.categoryName }}</td>
          </tr>
          <tr>
            <td>购买数量:</td>
            <td>{{ ditaillist.goodsOrder.goodsQuantity }}</td>
            <td>单价:</td>
            <td>{{ ditaillist.goodsOrder.goodsSalePrice }}元</td>
          </tr>
          <tr>
            <td>快递费:</td>
            <td>{{ ditaillist.roomSalePrice }}元</td>
            <td>总价:</td>
            <td>{{ ditaillist.goodsOrder.totalAmount }}元</td>
          </tr>
        </table>
        <hr>
        <h3 class="ml20">退款信息</h3>
        <table class="table">
          <tr>
            <td>退货单号:</td>
            <td>{{ ditaillist.orderSn }}</td>
            <td>申请时间:</td>
            <td>{{ ditaillist.createTime }}</td>
          </tr>
          <tr>
            <td>退货状态:</td>
            <td>{{ ditaillist.status | refundOrderType }}</td>
            <td/>
            <td/>
          </tr>
          <tr>
            <td>联系人:</td>
            <td>{{ ditaillist.contactPerson }}</td>
            <td>联系电话:</td>
            <td>{{ ditaillist.contactPhone }}</td>
          </tr>
        </table>
        <div>
          <hr>
          <h3 class="ml20">退款操作</h3>
          <table class="table">
            <tr>
              <td>商品实付</td>
              <td>{{ ditaillist.goodsOrder.payAmount }}元</td>
              <td>退款金额:</td>
              <td>{{ ditaillist.refundAmount }}</td>
            </tr>
            <tr>
              <td>收货地址</td>
              <td colspan="3">{{ ditaillist.receiverAddress }}</td>
            </tr>
            <tr>
              <td>退款异常备注</td>
              <td colspan="3">
                <el-input v-model="refundData.refundRemark" type="textarea" style="margin-top:5px"/>
              </td>
            </tr>
          </table>
          <hr>
          <p class="askTip"><i class="el-icon-warning warning"/>是否确认操作该订单?</p>
          <div style="width:100%; text-align:center">
            <el-button
              v-preventReClick
              type="primary"
              @click="abnormalRefund()">完成退款</el-button>
            <el-button v-preventReClick :disabled="false" @click="closeDialog">取消</el-button>
          </div>
        </div>

      </div>
    </el-dialog>
    <CheckVoucher
      :visible.sync="checkVoucherVisible"
      :check-index.sync="checkVoucherIndex"
      :check-data="checkVoucherData"
    />
    <logistics
      :logistics-visible.sync="logistics"
      :logistics-index="logisticsIndex"
      :delivery-company="deliveryCompany"
      :logistics-order-sn="orderSn"/>
    <remark :remark-list="remarkList" :remark-visible.sync="remarkVisible" :remark-index="remarkIndex" />
  </div>

</template>

<script>
import { Message } from 'element-ui'
import { getAddressList } from '@/api/address'
import { provinceAndCityData, regionData, CodeToText, TextToCode } from 'element-china-area-data'
import CheckVoucher from '@/components/checkVoucher'
import logistics from '@/components/logistics'

import { checkPlatremark } from '@/api/financial'
import remark from '@/components/remark'

// <span v-if="scope.row.refundOrderStatus === -100">退款关闭</span>
//           <span v-else-if="scope.row.refundOrderStatus === 0">待审核</span>
//           <span v-else-if="scope.row.refundOrderStatus === 100">同意退(货)款</span>
//           <span v-else-if="scope.row.refundOrderStatus === 200">拒绝退(货)款</span>
//           <span v-else-if="scope.row.refundOrderStatus === 300">退货中</span>
//           <span v-else-if="scope.row.refundOrderStatus === 400">退款中</span>
//           <span v-else-if="scope.row.refundOrderStatus === 500">已退款</span>
export default {
  components: { CheckVoucher, logistics, remark },
  filters: {
    detailAddress() {
      if (this.ditaillist.receiverProvince === '北京市' || this.ditaillist.receiverProvince === '天津市') {
        return this.ditaillist.receiverProvince + this.ditaillist.receiverDetailAddress + this.ditaillist.receiverCounty
      } else {
        return this.ditaillist.receiverProvince + this.ditaillist.receiverCity + this.ditaillist.receiverCounty + this.ditaillist.receiverDetailAddress
      }
    },
    refundOrderType(status) {
      const map = {
        1: '退款',
        2: '退货退款'
      }
      return map[status]
    },
    formatRefundStatus(status) {
      const map = {
        0: '待审核',
        100: '同意退(货)款',
        200: '拒绝退(货)款',
        300: '退货中',
        400: '退款中',
        500: '已退款',
        600: '同意退款(退款异常)'
      }
      if (status === -100) {
        return '退款关闭'
      } else {
        return map[status]
      }
      // return status ? '退款关闭' : map[status]
    }
    /**
         * 待审核
         */
    // PENDING_REVIEWING(0),
    /**
         * 退款中
         */
    //  REFUNDING(1),
    /**
         * 已退款
         */
    // REFUNDED(2),
    /**
         * 已拒绝
         */
    // REFUSED(3),
    /**
         * 退款失败
         */
    // REFUND_FAIL(4),
    /**
         * 退款异常
         */
    // REFUND_CHANGE(5),
    /**
         * 退款关闭
         */
    // REFUND_CLOSE(6)
    // formatRefundStatus(orderStatus) {
    //   const storeOrderMap = {
    //     0: '待审核',
    //     1: '退款中',
    //     2: '已退款',
    //     3: '已拒绝',
    //     4: '退款失败',
    //     5: '退款异常',
    //     6: '退款关闭'
    //   }
    //   return storeOrderMap[orderStatus]
    // }
  },
  props: {
    dialogdata: {
      type: Array,
      required: true
    },
    detialvisible: {
      type: Boolean,
      required: true
    },
    myindex: {
      type: Number,
      required: true
    },
    detailMode: {
      type: String,
      required: true
    },
    isRefund: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      remarkVisible: false, // 查看备注
      remarkList: [],
      remarkIndex: -1,

      logistics: false, // 物流弹窗
      logisticsIndex: -1,
      deliveryCompany: '',
      orderSn: '',

      checkVoucherVisible: false, // 查看凭证
      checkVoucherIndex: -1,
      checkVoucherData: '',

      addressList: [],
      addressData: {
        name: '',
        phone: ''
      },
      ditaillist: {},
      detailIndex: 0,
      roleName: '',
      loginTime: '',
      nickName: '',
      labeWidth: '120px',
      refundData: {
        refundAmount: '',
        refundRemark: ''
      }
    //   rules: {
    //     refundAmount: [
    //       { required: false, message: '请填写门市价', trigger: 'blur' },
    //       // { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '请输入正确数值,需大于0', trigger: 'blur' },
    //       { pattern: /(?!^0*(\.0{1,2})?$)^\d{1,13}(\.\d{1,2})?$/, message: '请输入正确的数字，并且小数点后最多保留两位数字', trigger: 'blur' }
    //     ]
    //   }
    }
  },
  computed: {
    // 权限按钮 computed
    setPermissionBtn() {
      return function(str, row) {
        let index = -1
        const buttonList = this.$store.getters.button
        index = buttonList.findIndex(item => item.value === str)
        // console.log(index)
        if (index !== -1) {
          row.btnName = buttonList[index].name
          return true
        } else {
          return false
        }
      }
    },
    formatTitle() {
      return function(val) {
        // console.log('弹出框的标题：：：', val)
        const map = {
          'refundDetail': '订单详情'
        }
        return map[val] || ''
      }
    },

    detailAddress() {
      return function(item) {
        // console.log(item.province)
        if (item.province === '120000' || item.province === '110000') {
          return CodeToText[[item.province]] + CodeToText[[item.county]] + item.detailAddress
        } else {
          return CodeToText[[item.province]] + CodeToText[[item.county]] + CodeToText[[item.city]] + item.detailAddress
        }
      }
    },

    formatAddress() {
      return function(item) {

      }
    }

  },
  watch: {
    myindex(val) {
      this.detailIndex = val
      this.ditaillist = this.dialogdata[this.detailIndex]
      if (this.detailMode === 'confirmRefund' && val !== -1) { // 申请退款处理
        this.refundData.refundAmount = this.ditaillist.refundAmount
      }
      if (this.detailMode === 'confirmReceipt' && val !== -1) { // 确认收货
        this.refundData.refundAmount = this.ditaillist.refundAmount
      }
    }
  },
  mounted() {
    this.getAddressList()
  },
  methods: {
    // 查看备注
    checkRemark(id, index, ditaillist) {
      console.log('ditaillist', ditaillist.goodsRefundOrderRemarks)
      this.remarkList = ditaillist.goodsRefundOrderRemarks
      if (this.remarkList.length) {
        this.remarkVisible = true
        this.remarkIndex = index
      } else {
        this.$message('暂无备注');
      }
    },
    // 物流信息
    toLogistics(orderSn, deliveryCompany, index) {
      console.log('orderSn:', orderSn)
      console.log('deliveryCompany:', deliveryCompany)
      console.log('index:', index)
      this.deliveryCompany = deliveryCompany
      this.logistics = true
      this.orderSn = orderSn
      this.logisticsIndex = index
    },
    changeSelect(data) {
      console.log(data)
      this.refundData.detailAddress = this.detailAddressFn(data)
      this.addressData.name = data.name
      this.addressData.phone = data.phone
    },
    detailAddressFn(item) {
      if (item.province === '120000' || item.province === '110000') {
        return CodeToText[[item.province]] + CodeToText[[item.county]] + item.detailAddress
      } else {
        return CodeToText[[item.province]] + CodeToText[[item.county]] + CodeToText[[item.city]] + item.detailAddress
      }
    },
    // 查看凭证
    checkVoucher() {
      if (this.ditaillist.refundVoucher) {
        this.checkVoucherVisible = true
        this.checkVoucherIndex = 0
        this.checkVoucherData = this.ditaillist.refundVoucher
      } else {
        Message.info('暂无数据')
      }
    },
    // 退款异常时，完成退款
    abnormalRefund() {
      const sentData = {
        id: this.ditaillist.id,
        remarks: this.refundData.refundRemark
      }
      this.$emit('abnormalRefund', sentData)
      this.closeDialog()
    },
    // 确认收货
    confirmReceipt() {
      const sentData = {
        id: this.ditaillist.id,
        remarks: this.refundData.refundRemark,
        actualRefundAmount: this.refundData.refundAmount
      }
      this.$confirm('您确进行此操作？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('confirmReceipt', sentData)
        this.closeDialog()
      })
    },
    // 拒绝退款
    refuseRefund() {
      console.log(this.refundData)
      const sentData = {
        id: this.ditaillist.id,
        remark: this.refundData.refundRemark,
        isAgreen: false
      }
      this.$confirm('您确定拒绝退款？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('confirmOrder', sentData)
        this.closeDialog()
      })
    },
    // 同意退款
    agreenRefund() {
      console.log(this.refundData)
      // if (this.refundData.refundAmount)
      if (!this.refundData.refundAmount) {
        Message.error('请填写退款金额')
        return
      }
      if (parseFloat(this.refundData.refundAmount) > parseFloat(this.ditaillist.orderAmount)) {
        Message.error('退款金额不得大于订单金额')
        return
      }
      console.log(this.refundData.detailAddress)
      if (!this.refundData.detailAddress && this.ditaillist.refundType === 2) {
        Message.error('请选择收货地点')
        return
      }
      const sentData = {
        id: this.ditaillist.id,
        remark: this.refundData.refundRemark,
        actualRefundAmount: this.refundData.refundAmount,
        phone: this.addressData.phone,
        name: this.addressData.name,
        detailAddress: this.refundData.detailAddress,
        isAgreen: true
      }
      this.$confirm('您确定同意退款？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('confirmOrder', sentData)
        this.closeDialog()
      })
    },
    // 获取发货地址
    getAddressList() {
      getAddressList().then(res => {
        if (res.code === '200') {
          this.addressList = res.data.list
        } else {
          Message.error(res.message + '' + res.data)
        }
        // console.log(res)
      })
    },
    closeDialog() {
      this.$emit('update:detialvisible', false)
      this.$emit('update:myindex', -1)
    }
  }
}
</script>

<style scoped>

  .detailWarp .el-dialog .el-dialog__body{
        padding: 10px 20px 20px 20px
    }
  .input { width:38% }
  .f_red{
      color:red
  }
  .detailWarp{
    padding-bottom:20px;
  }
  .el-dialog{
    padding-bottom:20px;
  }
  .el-form{
    padding-bottom: 20px;
  }
  .storeOrder .el-form-item{
      margin-bottom: 10px;
  }

   .ml20{
        margin-left: 20px;
    }

  .storeOrder_title{
      padding:10px;
      margin:10px;
      margin-bottom:20px;
      background: #f5f5f5;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
  }

  hr{
      border: 1px solid #eee;
      margin: 20px 0;
  }

  .table{
      width:90%;
      line-height: 40px;
  }

  .table td{border:0}

  .table td:nth-of-type(odd){
      width:18%;
      text-align: right;
      font-weight: bold;
      vertical-align: top;
  }

  .table td:nth-of-type(even){
      width:32%;
      text-align: left;
      padding-left: 1%;
      color: #999;
      vertical-align: top;
  }

  .table td span{
      font-weight: bold;
      margin-right: 1%;
  }

  .askTip{
      width:100%;
      text-align:center;
      line-height: 60px;
      font-weight: bold;
  }

  .warning{
      color: #E6A23C;
      margin-right: 4px;
  }

  .storeOrder .el-form-item{
      margin-bottom: 10px;
  }

  .bottomButtonDiv{
      width: 100%;
      margin-top: 20px;
      padding-left: 20px;
      text-align: center;
  }
</style>
